<template>
  <div>
    <el-dialog
        title="参会问卷"
        :visible.sync="addTemplateDia"
        width="800px"
        center
        :close-on-click-modal="false"
      >
      <div class="apply_right" v-loading="isloading">
     <el-form :model="questiontemplateVo" ref="dynamicValidateForm"  class="demo-dynamic">
      <div class="mb16">
        <div class="error_title">
        <el-form-item  prop="template.templateName"  :rules="[{ required: true, message: '请输入问卷模板名称', trigger: 'blur' }]">
        <div class="title_body">
          <span>问卷模板名称:</span>
          <el-input
            v-model="questiontemplateVo.template.templateName"
            placeholder="请输入模板名称"
            class="width500 mr16"
          />
        </div>
        </el-form-item>
    </div>
    <div class="title_body">
          <span>新增问题类型:</span>
          <el-button type="primary" class="mr16" plain icon="el-icon-plus" @click="addQuestion('Radio')">单选题</el-button>
          <el-button type="primary" class="mr16" plain icon="el-icon-plus" @click="addQuestion('CheckBox')">多选题</el-button>
          <el-button type="primary" plain icon="el-icon-plus" @click="addQuestion('Text')">填空题</el-button>
        </div>
        <div class="question_list" v-for="(item,index) in questiontemplateVo.question" :key="item.questionid">
            <div class="ques_title">
                <span class="title" v-if="item.answertype=='Radio'">单选</span>
                <span class="title" v-if="item.answertype=='CheckBox'">多选</span>
                <span class="title" v-if="item.answertype=='Text'">填空</span>
                <span>
                    <el-button class="mr16" icon="el-icon-plus" v-if="item.answertype!='Text'" @click="addChoose(item)">添加选项</el-button>
                    <el-button type="text" @click="delQuestion(item)">删除</el-button>
                </span>
            </div>
            <div class="ques_body">
                <el-form-item   :prop="'question.' + index + '.content'" :rules="[{required: true, message: '题目标题不能为空', trigger: 'blur'}]">
                <div class="mb16" >
                    <span class="nums">{{ index>8?index+1:'0'+Number(index+1) }}</span>
                    <el-input v-model="item.content" placeholder="请输入题目标题" class="width500"/>
                </div>
            </el-form-item>
                <div v-if="item.answertype=='Radio'||item.answertype=='CheckBox'">
                   
            <el-form-item v-for="(items,indexs) in item.answerList" :key="items.answerid" :prop="'question.' + index + '.answerList.' + indexs + '.name'" :rules="[{required: true, message: '选项不能为空', trigger: 'blur'}]">
                    <div class="mb16 ml38" >
                    <el-input v-model="items.name" placeholder="输入选项" class="width500 mr16"/>
                    <i class="el-icon-close" style="cursor: pointer;" @click="delChoose(item,items)"></i>
                </div>
            </el-form-item>
                </div>
                <div v-else>
                <div class="mb16 ml38" >
                    <el-input v-model="item.answerList[0].name"  type="textarea" :rows="3" placeholder="请您回复内容" class="width500"/>
                </div>
                </div>
       
            </div>
        </div>
      </div>
    </el-form>

    </div>
    <div class="btm_butn" slot="footer">
        <el-button type="primary" @click="saveQuestion('dynamicValidateForm')">保存</el-button>
    </div>
      </el-dialog>
  </div>
</template>

<script>
import api from '@/api/index'
export default {
data(){
    return{
        addTemplateDia:false,
        isloading:false,
        questiontemplateVo:{
            template: {
        templateName: "",
        channel: "1",
        imshowid: "",
        isDelete: false,
      },
      question: [
        {
            answertype:'Radio',//CheckBox,Radio,Text
            content:'',
            codevalue:'template',
            sortorder:'',
            answerList:[
                {
                    name:'',
                    answertype:'Radio',//CheckBox,Radio,Text
                },
                {
                    name:'',
                    answertype:'Radio',//CheckBox,Radio,Text
                }
            ]
        }
      ],
        }
    }
},
methods:{
    addChoose(val){
        this.questiontemplateVo.question.forEach(item => {
            if(item==val){
              item.answerList.push({name:'',answertype:val.answertype})
            }
        });
    },
    delChoose(items,val){
        this.questiontemplateVo.question.forEach(item => {
            if(item==items){
                var index = item.answerList.indexOf(val)
        if (index !== -1) {
            item.answerList.splice(index, 1)
        }
            }
        });
    },
    addQuestion(val){
        let form={ 
            answertype:val,
            content:'',
            codevalue:'template',
            sortorder:'',
            answerList:[
                {
                    name:'',
                    answertype:val,
                },
            ]
        }
        this.questiontemplateVo.question.push(form)
    },
    delQuestion(val){
        var index = this.questiontemplateVo.question.indexOf(val)
        if (index !== -1) {
            this.questiontemplateVo.question.splice(index, 1)
        }
    },
    saveQuestion(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isloading=true
            this.questiontemplateVo.template.imshowid=this.$store.getters.imShowId
            api.tool.saveTemplate(this.questiontemplateVo).then(res=>{
                this.$message({type:'success',message:'创建成功！'})
                setTimeout(() => {
                    this.addTemplateDia=false
                    this.$emit('sure',true)
                    this.isloading=false
                }, 3000);
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
    }
}
}
</script>

<style lang="scss" scoped>
.mb26 {
  margin-bottom: 26px !important;
}
.width500 {
  width: 500px !important;
}
.apply_right {
  margin-left: 16px;
  flex-grow: 1;
  background: #fff;
  height: 500px;
  overflow-y: auto;
  .btm_butn{    
    // border-top: 1px solid #E5EAF0;
    text-align: center;
  }
  .title_body {
    padding: 12px 24px;
    // border-bottom: 1px solid #dde2e8;
    span {
      font-size: 14px;
      font-weight: 600;
      color: #202933;
      line-height: 16px;
      padding-right: 20px;
    }
  }
  .question_list{
    margin:0 24px;
    margin-top: 20px;
   
  .ques_title{
    @include flex(row, center, space-between);
    .title{
font-size: 16px;
font-weight: 600;
color: #202933;
line-height: 19px;
    }
  }
  .ques_body{
    margin-top: 21px;
padding: 24px ;
background: #F9FAFD;
.nums{
font-size: 14px;
color: #000000;
line-height: 16px;
padding: 0 11px;
}
  }
  .ml38{
    margin-left: 38px;
  }
  }
}

::v-deep .el-form-item{
    margin-bottom: 0px !important;
}
::v-deep .el-form-item__error{
    top: 70% !important;
    left: 38px !important;
}
::v-deep .error_title .el-form-item__error{
    top: 70% !important;
    left: 133px !important;
}
</style>